<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <base href="${APP_PATH}/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>考勤情况</title>
    <link rel="icon" href="public/favicon.ico" type="image/ico">
    <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
    <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
    <meta name="author" content="yinqi">
    <jsp:include page="/commons.jsp"></jsp:include>
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <jsp:include page="/menu.jsp"></jsp:include>

        <!--End 左侧导航-->

        <!--头部信息-->
        <jsp:include page="/head.jsp"></jsp:include>

        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">

                                <div class="col-lg-3">
                                    <form class="pull-left search-bar"  role="form">
                                        <div class="input-daterange input-group js-datepicker" data-auto-close="false" data-date-format="yyyy/mm/dd">
                                            <input class="form-control" type="text" id="minDate" name="minDate" placeholder="minDate">
                                            <span class="input-group-addon"><i class="mdi mdi-chevron-right"></i></span>
                                            <input class="form-control" type="text" id="maxDate" name="maxDate" placeholder="maxDate">
                                        </div>
                                    </form>
                                </div>
                                <div class="col-lg-2">

                                    <select class="form-control" type="text" id="classes" name="classes"  value=""  />


                                    </select>
                                </div>
                                <div class="col-lg-2">
                                    <select class="form-control" type="text" id="cfstatus" name="cfstatus"  value=""  />
                                    <option value="">请选择状态：</option>
                                    <option value="正常">正常</option>
                                    <option value="迟到">迟到</option>
                                    <option value="请假">请假</option>
                                    </select>
                                </div>
                                <div class="col-lg-2">
                                    <input class="form-control" type="text" id="nameLike" name="nameLike"  value="" placeholder="输入查询学员姓名" />
                                </div>
                                <div class="toolbar-btn-action">
                                    <button class="btn btn-success m-r-5" id="search" type="button">查询</button>

                                    <a class="btn btn-primary m-r-5" href="#!" id="sickBtn" data-toggle="modal" data-target="#confirmModal"><i class="mdi mdi-checkbox-marked-circle-outline"></i> 请假审批 <span id="number" class="badge bg-danger"></span> </a>

                                </div>
                            </div>
                            <div class="card-body">

                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th>
                                                <label class="lyear-checkbox checkbox-primary">
                                                    <input type="checkbox" id="check-all"><span></span>
                                                </label>
                                            </th>
                                            <th>序号</th>
                                            <th>学生编号</th>
                                            <th>学生姓名</th>
                                            <th>考勤日期</th>
                                            <th>考勤状态</th>
                                        </tr>
                                        </thead>
                                        <tbody id="dataList">
                                        <script id="dataTpl" type="text/javascript">
                                            {{each checkinfos checkinfo}}
                                            <tr>
                                            <td>
                                            <label class="lyear-checkbox checkbox-primary">
                                                <input type="checkbox" name="ids[]" value="{{checkinfo.cfid}}"><span></span>
                                                </label>
                                                </td>
                                                <td>{{$index+1}}</td>
                                            <td>{{checkinfo.student.sno}}</td>
                                            <td>{{checkinfo.student.uname}}</td>

                                            <td>
                                            {{checkinfo.times}}
                                            </td>
                                            <td>
                                            {{if checkinfo.cfstatus == '正常'}} <font class="text-success">{{checkinfo.cfstatus}}</font>    {{/if}}
                                            {{if checkinfo.cfstatus != '正常'}} <font class="text-danger">{{checkinfo.cfstatus}}</font>    {{/if}}
                                            </td>
                                            </tr>
                                            {{/each}}
                                        </script>


                                        </tbody>
                                    </table>
                                </div>
                                <ul class="pagination" id="pageList">



                                </ul>

                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<!-- Start 请假审批模态框 -->
<div class="modal fade bs-example-modal-lg in" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close" ><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">请假</h4>
            </div>


                <div class="modal-body">
                    <form class="form-horizontal" action="" method="post" enctype="multipart/form-data" onsubmit="return false;">
                        <table class="table table-bordered">
                            <thead>
                            <th>序号</th>
                            <th>学号</th>
                            <th>学生姓名</th>
                            <th>开始时间</th>
                            <th>结束时间</th>
                            <th>状态</th>
                            <th>审批</th>
                            <th>审批人</th>
                            </thead>

                            <tbody id="sickformInfo">
                            <script id="sickTpl" type="text/javascript">
                                {{each sickforms sickform}}
                                <tr>

                                <td>{{$index+1}}</td>
                                <td>{{sickform.student.sno}}</td>
                                <td>{{sickform.student.uname}}</td>

                                <td>
                                {{sickform.starttime}}
                                </td>
                                <td>
                                {{sickform.endtime}}
                                </td>
                                <td>
                                {{sickform.status}}
                                </td>
                                <td>
                                    <button class="rejectBtn btn btn-danger btn-sm" type="button" data-sid="{{sickform.sid}}">驳回</button>
                                    <button class="passBtn btn btn-success btn-sm" type="button" data-sid="{{sickform.sid}}">通过</button>
                                </td>
                                <td>{{sickform.confirmer.uname}}</td>


                                </tr>
                                {{/each}}
                            </script>

                        </table>

                </div>
                <div class="modal-footer">
                    <button type="button" id="" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>

        </div>
    </div>
</div>
<!-- End 请假模态框 -->
<!--日期选择插件-->
<script src="public/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="public/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('.search-bar .dropdown-menu a').click(function() {
            var field = $(this).data('field') || '';
            $('#search-field').val(field);
            $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
        });


        //多条件分页查询

        var examplesMap ="";
        $("#search").click(function () {
            var minDate = $("#minDate").val();
            var maxDate = $("#maxDate").val();
            var cfstatus = $("#cfstatus").val();
            var nameLike = $("#nameLike").val();
            var classes = $("#classes").val();
            examplesMap = {"minDate":minDate,"maxDate":maxDate,"cfstatus":cfstatus,"nameLike":nameLike,"classes":classes};

            examplesMap = JSON.stringify(examplesMap);
            goPage("1",examplesMap);
        });//多条件分页查询

        //点击page跳转页面
        $(document).on("click",".page" , function (event) {
            let page = $(this).attr("data-page");
            goPage(page,examplesMap);
        })//点击page跳转页面

        //进入页面展示本班学院请假信息
        layer.msg("加载中", {time:500, icon:16, shift:5}, function(){
            goPage("1","");
        });//layer

        //点击显示请假审批信息模态框，并将其内容进行初始化
        $("#sickBtn").click(function () {
            showSickInfo();
        });//点击显示请假信息模态框，并将其内容进行初始化




        //提交审批信息，对其进行修改pass
        $(document).on("click",".passBtn",function(event){
            let sid = $(this).attr("data-sid");
            $.ajax({
                url:"sickform/update",
                data:{"sid":sid,"status":"通过"},
                dataType:"json",
                type:"post",
                success:function (result) {
                    if(result.result){
                        layer.msg("审批成功", {time:1000, icon:6, shift:6}, function () {
                            showSickInfo();
                        });
                    }else{
                        layer.msg("审批失败", {time:1000, icon:5, shift:6}, function () {});
                    }
                }//success
            })//ajax
        });//提交审批信息，对其进行修改pass


        //提交审批信息，对其进行修改rejectBtn
        $(document).on("click",".rejectBtn",function(event){
            let sid = $(this).attr("data-sid");
            $.ajax({
                url:"sickform/update",
                data:{"sid":sid,"status":"驳回"},
                dataType:"json",
                type:"post",
                success:function (result) {
                    if(result.result){
                        layer.msg("审批成功", {time:1000, icon:6, shift:6}, function () {
                            showSickInfo();
                        });
                    }else{
                        layer.msg("审批失败", {time:1000, icon:5, shift:6}, function () {});
                    }
                }//success
            })//ajax
        });//提交审批信息，对其进行修改rejectBtn

    });//入口



    function showSickInfo(){
        $.ajax({
            url:"sickform/initConfirm",
            data:{"confirmid":"${loginUser.uid}"},
            dataType: "json",
            type:"post",
            success:function(result){
                if(result.result){
                    layer.msg("加载中", {time:500, icon:16, shift:5}, function(){
                        let sickformInfoHtml = template("sickTpl", {
                            sickforms : result.sickforms
                        });
                        console.log(result.sickforms);
                        $("#number").text(result.sickforms.length);
                        $("#sickformInfo").html(sickformInfoHtml);

                    });//layer
                }else{
                    layer.msg("加载失败", {time:1000, icon:5, shift:6}, function () {});
                }
            }//success
        })//ajax
    }



    function goPage(pageNum,examplesMap){
        $.ajax({
            url:"attendance/listByTid",
            data:{"uid":"${loginUser.uid}","pageNum":pageNum,"examplesMap":examplesMap},
            dataType:"json",
            type:"post",
            success:function (result) {
                if(result.result){

                    //显示待审批的请假信息数量
                    $("#number").text(result.size);
                    //展示考勤信息列表
                    let dataHtml = template("dataTpl", {
                        checkinfos : result.checkinfos
                    });
                    $("#dataList").html(dataHtml);

                    //生成班级下拉框
                    $("#classes").empty();
                    var classesHtml = "";
                    classesHtml += "<option value=''>请选择班级：</option>";
                    $.each(result.classesList,function (index,obj) {
                        if(result.classesid != null && result.classesid == obj.cid){
                            classesHtml += "<option selected value='"+obj.cid+"'>"+obj.cname+"</option>";
                        }else{
                            classesHtml += "<option value='"+obj.cid+"'>"+obj.cname+"</option>";
                        }

                    });
                    $("#classes").html(classesHtml);
                    //生成班级下拉框
                    if(result.pageInfo == null){
                        layer.msg("查询无数据", {time:1000, icon:5, shift:6}, function () {

                        });
                        return;
                    }
                     //start - 生成页码
                    $("#pageList").empty();
                    var pageListHtml = "共有数据"+(result.pageInfo.total)+"条，当前页为第"+result.pageInfo.pageNum+"页，展示数据"+result.pageInfo.size+"条";
                    if(result.pageInfo.pageNum == 1){
                        pageListHtml += "<li class='disabled'><span><a class='page'>«</a></span></li>";
                    }else{
                        pageListHtml += "<li class=''><span><a class='page' href='javascript:void(0)' data-page="+result.pageInfo.prePage+">«</a></span></li>";
                    }
                    for (var i = 1 ; i <= result.pageInfo.pages ; i++){
                        var aObj2 = "";
                        if(result.pageInfo.pageNum == i){
                            aObj2 = "<li class='active' ><a class='page' href= 'javascript:void(0)' data-page="+i+">"+i+"</a></li>";
                        }else{
                            aObj2 = "<li ><a class='page' href= 'javascript:void(0)' data-page="+i+">"+i+"</a></li>";
                        }
                        pageListHtml += aObj2;
                    }
                    if(result.pageInfo.pageNum == result.pageInfo.pages){
                        pageListHtml += "<li class='disabled'><span><a class='page' >»</a></span></li>";
                    }else{
                        pageListHtml += "<li class=''><span><a class='page' href='javascript:void(0)' data-page="+result.pageInfo.nextPage+">»</a></span></li>";
                    }
                    $("#pageList").html(pageListHtml);
                    //end - 生成页码
                }
            }//success
        });//ajax
    }
</script>
</body>
</html>
